import React from 'react';
import '../../styles/home.less';
import { Link, NavLink, Route,Redirect,Switch} from 'react-router-dom';
import Bundle from '../../utils/Bundle';
import {BasePic} from '../../utils/basic';
import Cookies from 'js-cookie';
import GoodsList from '../goods/list';
import Login from '../admin/login';
import Register from '../admin/register';
import Account from '../admin/account';
import Protocol from './protocol';
const Teacher = (props) => (
	<Bundle load={() => import('./teacher')}>
			{(Teacher) => <Teacher {...props}/>}
	</Bundle>
);
const Download = (props) => (
	<Bundle load={() => import('./download')}>
			{(Download) => <Download {...props}/>}
	</Bundle>
);
const Index = (props) => (
	<Bundle load={() => import('./index')}>
			{(Index) => <Index {...props}/>}
	</Bundle>
);
const Course = (props) => (
	<Bundle load={() => import('./course')}>
			{(Course) => <Course {...props}/>}
	</Bundle>
);
let isLogin = false
const tabs = [
	{id: '/index/', name: '首页'},
	{id: '/teacher/', name: '教材特色'},
	{id: '/course/', name: '师资团队'},
	{id: '/download/', name: '下载中心'}
]
// 登陆钩子
const LoginRoute = ({ component: Component, ...rest }) => {
  isLogin = Cookies.get('token')
  let comp = ""
  if (!isLogin) {
    comp = (<Route {...rest} render={props => {
      return (
      <Component {...props} />
    )}} />)
  } else {
    comp = (<Redirect to="/admin" />)
  }
  return comp
}
class Home extends React.Component {
	state = {
		selected: ''
  }
  // 每次页面挂载都会刷新
  shouldComponentUpdate() {
    isLogin = Cookies.get('token')
    return true;        // 记得要返回true
  }
logout = (e) => {
    e.stopPropagation();
    Cookies.remove('token', { path: '/' });
    this.props.history.push('/login/');
      // window.location.href ="web/login"
  }
	// 初始化加载钩子
	componentDidMount () {
		// 获取并设置初始化路由
		let path = this.props.location.pathname
		path = path === '/' ? '/index/' : path
		this.setState({selected: path})
  }
  goLogin = () => {
    const curUrl = this.props.location.pathname
    const path = {
      pathname:'/login/'
    }
    if (curUrl==='/goodsList') {
      path.query = '/admin/goodList/'
    }
    this.props.history.push(path);
  }
  
	render() {
		return (
			<div>
				<div className='homeInfo row'>
						<nav className="navbar navbar-default title-bar">
									<div className="container-fluid title-bar">
											<div className="navbar-header title-bar">
												<a className="navbar-brand title-logo" href="/index/" style={{paddingTop:"9px"}}>
													<img alt="logo" src={BasePic+'logo.png'} style={{width:"152px",height:"42px"}}/>
												</a>
												<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false" onClick={()=>{
													this.setState({
														headShow:!this.state.headShow
													})
												}}>
													<span className="sr-only">Toggle navigation</span>
													<span className="icon-bar"></span>
													<span className="icon-bar"></span>
													<span className="icon-bar"></span>
												</button>
											</div>
											<ul className="nav navbar-nav navbar-right" style={{marginRight:"40px"}}>
														{/* <li className="dropdown">
															<img className="img-circle" src="https://fakeimg.pl/40x40/" alt='' style={{marginRight:"60px"}}/>                             
														</li> */}
														<li className="btn-change-color" style={{float:"left"}}>
																		<Link to='/goodsList/'>
																				<button type="button" className="title-buy title-text">立即购买</button>
																		</Link>
															</li>
														{isLogin?
																<li className="dropdown">
																	<a className="dropdown-toggle" style={{padding:0}} data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" onClick={(e)=>{
																		e.stopPropagation();
																			this.setState({
																				uiShow:!this.state.uiShow
																			})
																	}}> 
																	<img className="img-circle" src="https://fakeimg.pl/40x40/" alt='' style={{marginRight:"30px"}}/> 
																		{/* <span className="caret"></span> */}
																	</a>
																		<ul className="dropdown-menu" style={{display:this.state.uiShow?'block':'none'}}>
																			<li role="separator" className="menu-li"><NavLink to="/admin/myclass/">已上课程</NavLink></li>
																			<li role="separator" className="menu-li"><NavLink to="/admin/myOrder/">我的订单</NavLink></li>
																			<li role="separator" className="menu-li"><NavLink to="/admin/mine/">个人设置</NavLink></li>
																			<li role="separator" className="menu-li" onClick={this.logout} ><a>退出登录</a></li>
																		</ul>
																</li>
																:
																<li className="col-md-2"  style={{display:"inline-block",padding:'0'}}>
																	<button className="text-info" onClick={this.goLogin}>登录</button>
																</li>
																}
														
														
												</ul>
										<div className="collapse navbar-collapse"  style={{display:this.state.headShow?'block':'none'}}>
												<ul className="nav navbar-nav bottom-nav">
														{tabs.map(item => (
																<li key={item.id} role="presentation" className="title-text">
																		<NavLink to={item.id} activeClassName="activeName" onClick={()=>{
																			this.setState({
																				headShow:!this.state.headShow
																			})
																		}}>{item.name}</NavLink>
																</li>
															))}
												</ul>
									</div>
							</div>
					</nav>
          
				</div>
				<div>
				  {this.props.children}
				</div>
				<Switch>
						<Route path="/index" component={Index}/>
						<Route path="/course" component={Course}/>
						<Route path="/teacher" component={Teacher}/>
						<Route path="/download" component={Download}/>
						<Route path="/goodsList" component={GoodsList}/>
						<Route path="/protocol" component={Protocol}/>
            <LoginRoute path="/login" component={Login} />
            <Route path="/register" component={Register}/>
            <Route path="/account" component={Account}/>
						<Redirect to="/index/" />
				</Switch>
			</div>
		);
	}
}
export default Home;

